<template>
  <component ref="_inner" v-if="cmp!=null && !hidden"
             :is="cmp"
             :class="[calcClass, 'yv-source']"
             :style="calcStyleAndWidth"
             :modelValue="realValue"
             :readonly="readonly"/>
</template>

<script>
import _ from "lodash"
import {markRaw} from 'vue'
import {Source} from "../../Defaults"
import WebVjsonMix from "../WebVjsonMix"

export default {
  mixins: [WebVjsonMix],
  data() {
    const vjson = _.defaults(this.vjson, Source)

    return {
      hidden: vjson.hidden,
      language: vjson.language,
      readonly: vjson.readonly,
      bind: vjson.bind,
      stopWatchBindValue: null,
      cmp: null,
    }
  },
  mounted() {
    // if (this.language === 'javascript') {
    //   import ('../base/YvJsEditor.vue').then((module) => {
    //     console.log('YvJsEditor', module.default)
    //     // Vue.component('YvJsEditor', module.default)
    //     this.cmp = markRaw(module.default)
    //   })
    //
    // } else if (this.language === 'sql') {
    //   import ('../base/YvSqlEditor.vue').then((module) => {
    //     console.log('YvSqlEditor', module.default)
    //     // Vue.component('YvSqlEditor', module.default)
    //     this.cmp = markRaw(module.default)
    //   })
    // }

    if (this.bind?.value) {
      let bindValue = this.bind?.value
      if (_.startsWith(bindValue, '{') && _.endsWith(bindValue, '}')) {
        bindValue = bindValue.substring(1, bindValue.length - 1)
      }

      this.stopWatchBindValue = this.vcxt.scope.$watch(bindValue, (newVal) => {
        const value = this.editor.getValue()
        if (value !== newVal) {
          this.editor?.setValue(newVal ?? '')
        }
      })
    }
  },
  unmounted() {
    if (this.stopWatchBindValue) {
      this.stopWatchBindValue()
      this.stopWatchBindValue = null
    }
  },
  watch: {
    language: {
      immediate: true,
      handler(language) {
        if (language === 'javascript') {
          import ('../base/YvJsEditor.vue').then((module) => {
            console.log('YvJsEditor', module.default)
            // Vue.component('YvJsEditor', module.default)
            this.cmp = markRaw(module.default)
          })

        } else if (language === 'sql') {
          import ('../base/YvSqlEditor.vue').then((module) => {
            console.log('YvSqlEditor', module.default)
            // Vue.component('YvSqlEditor', module.default)
            this.cmp = markRaw(module.default)
          })
        }
      }
    },
    // readonly: {
    //   handler(newVal) {
    //     this.editor?.updateOptions({readOnly: newVal})
    //   }
    // }
  },
  computed: {
    realValue() {
      let bindValue = this.bind?.value
      if (_.startsWith(bindValue, '{') && _.endsWith(bindValue, '}')) {
        bindValue = bindValue.substring(1, bindValue.length - 1)
        return _.get(this.vcxt.scope.$data, bindValue)
      }
    },
  },
  methods: {}
}
</script>
<style lang="less">
.yv-source {
  width: 100%;
  overflow: scroll;
}
</style>